/*************************************
*    create by xiaofeng.yao
*    email 871213171@qq.com
*    time 2017.08.31
*    component qs-swiper
*    path /Users/apple/qishon/qishon-web-3.0/official-website/src/less/component/qs-swiper.less
*************************************/
@media (max-width: 768px) {
    .qs-swiper{
        .swiper-container{
            
            @swiper-height:17.5rem;
        
            height:@swiper-height;
            
            .swiper-slide{
                height:@swiper-height;
                background-size: cover;
                .qs-swiper__title{
                    margin-top: 9%;
                    .qs-swiper__title__h{
                        font-size:2rem;
                        margin-bottom: 1rem;
                    }
                    .qs-swiper__title__p{
                        font-size:1rem;
                        margin-bottom:1rem;
                    }
                    .qs-swiper__title__black{
                        color: black;
                    }
                    .qs-swiper__title__btnpanel{
                        a{
                            font-size:1rem;
                            padding:6px 16px;
                        }
                    }
                }
            }
    
        }
    } 
}
@media (min-width: 768px) and (max-width: 992px) { 
    .qs-swiper{
        .swiper-container{
            
            @swiper-height:18rem;
        
            height:@swiper-height;
            .swiper-slide{
                height:@swiper-height;
                background-size: cover;
                .qs-swiper__title{
                    margin-top: 8%;
                    .qs-swiper__title__h{
                        font-size:2.5rem;
                        margin-bottom: 2rem;
                    }
                    .qs-swiper__title__p{
                        font-size:1.3rem;
                        margin-bottom: 3rem;
                    }
                    .qs-swiper__title__black{
                        color: black;
                    }
                    .qs-swiper__title__btnpanel{
                        a{
                            font-size:1.17rem;
                            padding:10px 30px;
                        }
                    }
                }
            }
        }
    }
}
@media (min-width: 992px) and (max-width: 1180px) { 
    .qs-swiper{
        .swiper-container{
            
            @swiper-height:26rem;
        
            height:@swiper-height;
            .swiper-slide{
                height:@swiper-height;
                background-size: cover;
                .qs-swiper__title{
                    margin-top: 9%;
                    .qs-swiper__title__h{
                        font-size:3rem;
                        margin-bottom: 2rem;
                    }
                    .qs-swiper__title__p{
                        font-size:1.3rem;
                        margin-bottom: 3.5rem;
                    }
                    .qs-swiper__title__black{
                        color: black;
                    }
                    .qs-swiper__title__btnpanel{
                        a{
                            font-size:1.17rem;
                            padding:10px 30px;
                        }
                    }
                }
            }
        }
    }
}
@media (min-width: 1180px) { 
    .qs-swiper{
        .swiper-container{
            
            @swiper-height:41.7rem;
        
            height:@swiper-height;
            .swiper-slide{
                height:@swiper-height;
                .qs-swiper__title{
                    margin-top: 9%;
                    .qs-swiper__title__h{
                        font-size:3rem;
                        margin-bottom: 2rem;
                    }
                    .qs-swiper__title__p{
                        font-size:1.3rem;
                        margin-bottom: 3.5rem;
                    }
                    .qs-swiper__title__black{
                        color: black;
                    }
                    .qs-swiper__title__btnpanel{
                        a{
                            font-size:1.17rem;
                            padding:10px 30px;
                        }
                    }
                }
            }
        }
    }

}
.qs-swiper{
    .swiper-container{
        .swiper-wrapper{
            .swiper-slide{
                //background-size:100% 100%;
                .qs-swiper__title{
                    .qs-swiper__title__h{
                        color:#fff;
                        font-weight:300;
                    }
                    .qs-swiper__title__p{
                        color:#fff;
                        font-weight:100;
                    }
                    .qs-swiper__title__black{
                        color: black;
                    }
                    .qs-swiper__title__blue{
                        color: #004d75;
                    }
                    .qs-swiper__title__blue2{
                        color: #073965;
                    }
                    .qs-swiper__title__btnpanel{
                        a{
                            font-weight:300;
                            display:inline-block;
                            border-radius:4px;
                            border:1px solid #fff;
                            cursor: pointer;
                            background-color: transparent;
                            text-decoration:none;
                            color:#fff;
                            margin-right: 0.5rem;
                        }
                    }
                    .qs-swiper__title__btnblack{
                        a{
                            border: 1px solid black;
                            color: black;
                        }
                    }
                    .qs-swiper__title__btnblue{
                        a{
                            border: 1px solid #004d75;
                            color: #004d75;
                        }
                    }
                    .qs-swiper__title__btnblue2{
                        a{
                            border: 1px solid #073965;
                            color: #073965;
                        }
                    }
                }
            }
        }
        .swiper-pagination{
            .swiper-pagination-bullet{
                width: 12px;
                height: 12px;
                border:2px solid #fff;
            }
            .swiper-pagination-bullet-active{
                border:1px solid #007aff;
                box-shadow: 0 0 1px 2px #007aff;
                background: transparent;
            }
        }
    }
}
.pagination {
    position: absolute;
    z-index: 20;
    bottom: 10px;
    width: 100%;
    text-align: center;
}
.swiper-pagination-switch {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 8px;
    background: #555;
    margin: 0 5px;
    opacity: 0.8;
    border: 1px solid #fff;
    cursor: pointer;
}
.swiper-active-switch {
    background: #fff;
}
